<template>
  <div>
    <div class="operate flex-rowl">
      <el-upload v-if="!disabled" class="upload-demo" :headers="headers" :action="action" name="files" multiple
        :file-list="fileList" :on-success="handleSuccess">
        <el-button type="text" icon="el-icon-plus">添加文件</el-button>
      </el-upload>
      <el-button v-if="!disabled" class="ml10" type="text" icon="el-icon-close" @click="delAll">删除文件</el-button>
      <el-button type="text" class="ml10" icon="el-icon-download" @click="download">另存文件</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="fileName" label="文件名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="fileSize" label="文件大小" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row, rowIndex }">
          <div class="flex-rowc">
            <span class="color-ff6 mr10 pointer" @click="delFile(rowIndex)" v-if="!disabled">删除</span>
            <span class="color-2d7 pointer" @click="preview(row.previewURL)">查看</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { getFileList } from "@/api/leaveApplication.js"
export default {
  props: {
    businessId: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    files: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      fileList: [],
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      selectData: []
    }
  },
  computed: {
    action() {
      let type = "";
      const pathname = window.location.pathname;
      if (pathname.includes("matter")) {
        type = "TODO";
      }
      if (pathname.includes("application")) {
        type = "HOLIDAY";
      }
      if (pathname.includes("allNotice")) {
        type = "ALL";
      }
      if (pathname.includes("departmentNotice")) {
        type = "DEPART";
      }
      if (pathname.includes("hytz")) {
        type = "MEETING";
      }
      return `/zfw-web/workflow/business_attach/upload/${type}/${this.businessId}`
    }
  },
  watch: {
    files: {
      handler(val) {
        console.log("file", val)
        if (Array.isArray(val)) {
          this.tableData = val
          this.fileList = val
        }
      },
      immediate: true
    }
  },
  methods: {
    // 预览
    preview(url) {
      window.open(url)
    },
    downloadFile(url, fileName = "未知名文件", type = "download") {
      const el = document.createElement("a");
      el.style.display = "none";
      el.setAttribute("target", "_blank");
      type === "download" && fileName && el.setAttribute("download", fileName);
      el.href = url;
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    },
    // 下载文件
    download() {
      this.tableData.forEach(item => {
        this.downloadFile(item.fileName, item.previewURL)
      })
    },
    // 获取附件
    async getFile() {
      const { code, data } = await getFileList(this.businessId)
    },
    delAll() {
      if (this.tableData.length === 0) {
        this.$message.error("没有可删除的文件")
      } else {
        if (this.selectData.length === 0) {
          this.$message.error("先选择需要删除的文件")
        } else {
          this.$confirm("确定要删除所选文件吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.selectData.forEach((item) => {
                const index = this.tableData.findIndex(v => v.id === item.id)
                this.tableData.splice(index, 1)
              })
            })
            .catch(() => { });
        }
      }
    },
    // 删除
    delFile(index) {
      this.tableData.splice(index, 1)
    },
    // 上传成功
    handleSuccess({ code, msg, data }) {
      if (code === 200) {
        this.$message.success(msg)
        this.tableData.push(...data)
        this.$emit("upload", this.tableData)
      }
    },
    handlePreview() { },
    beforeRemove() { },
    handleExceed() { },
    handleSelectionChange(values) {
      this.selectData = values
    }
  }
}
</script>
<style lang="scss" scoped>
.operate {
  border-top: 1px solid #cfcccc;
  border-left: 1px solid #cfcccc;
  border-right: 1px solid #cfcccc;
  padding-left: 12px;
}
</style>
